<template>
  <div class="content">
    <el-date-picker v-model="yearValue" value-format="yyyy" @change="dateChangeFun" type="year" :editable="false" placeholder="选择年" style="width: 108px;height: 28px; margin-bottom:20px;"></el-date-picker>
    <el-row class="container-row" :gutter="20">
      <el-col :span="7">
        <!-- 机构数量 -->
        <div class="echarts-v3">
          <h2>机构数量</h2>
          <el-row class="nav">
            <el-col :span="6">
              <div class="sub active">
                <img src="../assets/images/n1.png"/>
                <p class="name">医院</p>
                <p class="number">{{hospitalList.hospitalTotal}}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="sub">
                <img src="../assets/images/n02.png"/>
                <p class="name">门诊</p>
                <p class="number">{{hospitalList.departmentTotal}}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="sub">
                <img src="../assets/images/n03.png"/>
                <p class="name">药店</p>
                <p class="number">{{hospitalList.pharmacyTotal}}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="sub">
                <img src="../assets/images/n04.png"/>
                <p class="name">外地</p>
                <p class="number">{{hospitalList.otherTotal}}</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 机构数量 over -->
        <!-- 参保人数 -->
        <div class="echarts-v3">
          <h2 class="index-flex">
              <p class="index-items">参保人数</p>
              <p class="index-items sum">人数共计 {{payPeopleList.allTotal}}</p>
          </h2>
          <el-row class="line">
            <el-col :span="4">
              <div class="pro-box">
                <el-progress type="circle" color="#458ED5" :width="43" :percentage="payPeopleList.townPeoplePercent" :show-text="false"></el-progress>
                <img src="../assets/images/b1.png" class="pro-img"/>
              </div>

            </el-col>
            <el-col :span="20">
              <div class="index-flex">
                <div class="index-items">
                  <h3>城乡居民</h3>
                  <p>占比 {{payPeopleList.townPeoplePercent}}%</p>
                </div>
                <div class="index-items">
                  {{payPeopleList.townPeopleTotal}}
                </div>
              </div>
              <el-progress :percentage="payPeopleList.townPeoplePercent"></el-progress>
            </el-col>
          </el-row>
          <el-row class="line">
            <el-col :span="4">
              <div class="pro-box">
                <el-progress type="circle" color="#458ED5" :width="43" :percentage="payPeopleList.staffPercent" :show-text="false"></el-progress>
                <img src="../assets/images/b2.png" class="pro-img"/>
              </div>

            </el-col>
            <el-col :span="20">
              <div class="index-flex">
                <div class="index-items">
                  <h3>城镇职工</h3>
                  <p>占比 {{payPeopleList.staffPercent}}%</p>
                </div>
                <div class="index-items">
                  {{payPeopleList.staff}}
                </div>
              </div>
              <el-progress :percentage="payPeopleList.staffPercent"></el-progress>
            </el-col>
          </el-row>
          <el-row class="line">
            <el-col :span="4">
              <div class="pro-box">
                <el-progress type="circle" color="#458ED5" :width="43" :percentage="payPeopleList.povertyAlleviationPercent" :show-text="false"></el-progress>
                <img src="../assets/images/b3.png" class="pro-img"/>
              </div>

            </el-col>
            <el-col :span="20">
              <div class="index-flex">
                <div class="index-items">
                  <h3>扶贫对象</h3>
                  <p>占比 {{payPeopleList.povertyAlleviationPercent}}%</p>
                </div>
                <div class="index-items">
                  {{payPeopleList.povertyAlleviation}}
                </div>
              </div>
              <el-progress :percentage="payPeopleList.povertyAlleviationPercent"></el-progress>
            </el-col>
          </el-row>
          <el-row class="line">
            <el-col :span="4">
              <div class="pro-box">
                <el-progress type="circle" color="#458ED5" :width="43" :percentage="payPeopleList.reimbursementPercent" :show-text="false"></el-progress>
                <img src="../assets/images/b4.png" class="pro-img"/>
              </div>

            </el-col>
            <el-col :span="20">
              <div class="index-flex">
                <div class="index-items">
                  <h3>门诊慢特病人数</h3>
                  <p>占比 {{payPeopleList.reimbursementPercent}}%</p>
                </div>
                <div class="index-items">
                  {{payPeopleList.reimbursement}}
                </div>
              </div>
              <el-progress :percentage="payPeopleList.reimbursementPercent"></el-progress>
            </el-col>
          </el-row>
          <el-row class="line">
            <el-col :span="4">
              <div class="pro-box">
                <el-progress type="circle" color="#458ED5" :width="43" :percentage="payPeopleList.reimbursementPercent" :show-text="false"></el-progress>
                <img src="../assets/images/b5.png" class="pro-img"/>
              </div>

            </el-col>
            <el-col :span="20">
              <div class="index-flex">
                <div class="index-items">
                  <h3>慢特病享受人数</h3>
                  <p>占比 {{payPeopleList.enjoyPercent}}%</p>
                </div>
                <div class="index-items">
                  {{payPeopleList.enjoyTotal}}
                </div>
              </div>
              <el-progress :percentage="payPeopleList.enjoyPercent"></el-progress>
            </el-col>
          </el-row>
        </div>
        <!-- 参保人数 over -->
        <!-- 救助对象基金预警区 -->
        <div class="echarts-v3">
          <h2>救助对象基金预警区    预警封顶线值9000（元）</h2>
          <el-row class="table-th">
            <el-col :span="6">姓名</el-col>
            <el-col :span="6">总金额</el-col>
            <el-col :span="6">统筹金额</el-col>
            <el-col :span="6">异常原因</el-col>
          </el-row>
          <div class="index-p" style="height: 223px;">
              <div v-if="reimList.length>0">
                  <el-row class="table-td" v-for="(item,index) in reimList" :key="index">
                    <el-col :span="6">{{item.userName}}</el-col>
                    <el-col :span="6">{{item.allTotal}}</el-col>
                    <el-col :span="6">{{item.insurance}}</el-col>
                    <el-col :span="6">{{item.errMessage}}</el-col>
                  </el-row>
              </div>
              <el-empty v-else :image-size="200"></el-empty>
          </div>
        </div>
        <!-- 救助对象基金预警区 over -->
        <!-- 基金支出年度同比 -->
        <!-- <div class="echarts-v3">
            <div id="ratio" style="width: 100%;height: 300px;"></div>
        </div> -->
        <!-- 基金支出年度同比 over -->
      </el-col>
      <el-col :span="17">
        <div class="echarts-v3">
          <el-tabs v-model="mode" @tab-click="handleClick">
            <el-tab-pane label="城镇职工" name="职工"></el-tab-pane>
            <el-tab-pane label="城乡居民" name="居民"></el-tab-pane>
          </el-tabs>
          <div id="main1" style="width: 100%;height: 400px;"></div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="echarts-v3">
              <h2>基金支出</h2>
              <!-- 统筹基金支出 -->
              <el-row class="fund">
                <el-col :span="10">
                  <p class="fund-t">统筹基金支出（元）</p>
                  <p class="money"><span>¥</span><span class="num" v-format="'#,##0.00'">{{expendList.insurance}}</span></p>
                </el-col>
                <el-col :span="14">
                  <div id="fund" style="width: 100%;height: 90px;"></div>
                </el-col>
              </el-row>
              <!-- 大额保险支出 -->
              <el-row class="fund insurance">
                <el-col :span="10">
                  <p class="fund-t">大额保险支出（元）</p>
                  <p class="money"><span>¥</span><span class="num" v-format="'#,##0.00'">{{expendList.bigMoney}}</span></p>
                </el-col>
                <el-col :span="14">
                  <div id="insurance" style="width: 100%;height: 80px;"></div>
                </el-col>
              </el-row>
              <!-- 医疗救助 -->
              <el-row class="fund person">
                <el-col :span="10">
                  <p class="fund-t">医疗救助（元）</p>
                  <p class="money"><span>¥</span><span class="num" v-format="'#,##0.00'">{{expendList.individual}}</span></p>
                </el-col>
                <el-col :span="14">
                  <div id="person" style="width: 100%;height: 80px;"></div>
                </el-col>
              </el-row>
              <!-- 共计支出 -->
              <el-row class="fund sum">
                <el-col :span="10">
                  <p class="fund-t">共计支出（元）</p>
                  <p class="money"><span>¥</span><span class="num" v-format="'#,##0.00'">{{expendList.allTotal}}</span></p>
                </el-col>
                <el-col :span="14">
                  <p class="word" v-if="expendList.type==0">上升趋势 <span>↑ {{expendList.percent}}</span> </p>
                  <p class="word" v-else>下降趋势 <span>↓ {{expendList.percent}}</span> </p>
                </el-col>
              </el-row>
            </div>
          </el-col>
         <!-- <el-col :span="8">
            <div class="echarts-v3">
              <h2>救助对象基金预警区    预警封顶线值7000（元）</h2>
              <el-row class="table-th">
                <el-col :span="6">姓名</el-col>
                <el-col :span="6">总金额</el-col>
                <el-col :span="6">统筹金额</el-col>
                <el-col :span="6">异常原因</el-col>
              </el-row>
              <div class="index-p">
                  <div v-if="reimList.length>0">
                      <el-row class="table-td" v-for="(item,index) in reimList" :key="index">
                        <el-col :span="6">{{item.userName}}</el-col>
                        <el-col :span="6">{{item.allTotal}}</el-col>
                        <el-col :span="6">{{item.insurance}}</el-col>
                        <el-col :span="6">{{item.errMessage}}</el-col>
                      </el-row>
                  </div>
                  <el-empty v-else :image-size="200"></el-empty>
              </div>
            </div>
          </el-col> -->
          <el-col :span="16">
            <div class="echarts-v3">
              <h2 class="index-flex">
                  <p class="index-items">定点机构统计分析</p>
                  <div class="index-items sum">
                  </div>
              </h2>
              <el-date-picker v-model="value1" @change="monthChangeFun" value-format="yyyy-MM" size="small" type="monthrange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              <!-- <h3 class="index-title">医保基金支出同比上涨趋势</h3> -->
              <el-row class="table-th" style="margin-top: 10px;">
                <el-col :span="4">医院名称</el-col>
                <el-col :span="4">统筹支付总额</el-col>
<!--                <el-col :span="3">纳入内费用</el-col> -->
                <!-- <el-col :span="3.5">费用总额</el-col> -->
                <el-col :span="4">统筹支付</el-col>
                <el-col :span="4">大额支付</el-col>
                <el-col :span="4">医疗救助</el-col>
                <el-col :span="4">占比</el-col>
             </el-row>
              <div class="index-p" style="height: 385px;">
                <div v-if="messList.length>0">
                    <el-row class="table-td" v-for="(item,index) in messList" :key="index">
                      <el-col :span="4">{{item.hospName}}</el-col>
                      <el-col :span="4">{{item.total}}</el-col>
<!--                      <el-col :span="4">{{item.inss}}</el-col>
                      <el-col :span="4">{{item.medical}}</el-col> -->
                      <el-col :span="4">{{item.payment}}</el-col>
                      <el-col :span="4">{{item.bigMoney}}</el-col>
                      <el-col :span="4">{{item.svMoney}}</el-col>
                      <el-col :span="4">{{item.percentSvMoney}}</el-col>
                    </el-row>
                </div>
                <el-empty v-else :image-size="200"></el-empty>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getHospitalCount,getSumByMouth,getPaymentPeople,getPayOfYear,getExpenditure,getReimbursementAlert,getDataMessage} from "@/api/index";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.3",
      yearValue:new Date().getFullYear().toString(),
      hospitalList:[],//机构数量
      payPeopleList:[],//参保人数
      expendList:[],//基金支出
      reimList:[],//报销预警区
      messList:[],//月统计分析
      startTime:"",
      endTime:"",
      value1:['',''],
      mode:"职工"
    };
  },
  methods: {
    handleClick(event){
      console.log(this.mode)
      this.getSumByMouth();
    },
    monthChangeFun(event){
      console.log(event);
      this.value1 = event;
      this.getDataMessage();

    },
    getPaymentPeople(){
      //参保人数
      let data = {
        year:this.yearValue
      }
      getPaymentPeople(data).then(res => {
        if(res.code == 200){
          this.payPeopleList =res.data;
        }
      })
    },
    dateChangeFun(event){
      this.yearValue = event;
      //机构数量
      this.getHospitalCount();
      //参保人数
      this.getPaymentPeople();
      //基金支出
      this.getExpenditure();
      //基金年度同比
      //this.getPayOfYear();
      //2022年基金支出额
      this.getSumByMouth();
      //报销预警区
      this.getReimbursementAlert();
      //月统计分析
      this.getDataMessage();
    },
    getHospitalCount(){
      //机构数量
        let data = {
          year:this.yearValue
        }
        getHospitalCount(data).then(res => {
          if(res.code == 200){
              this.hospitalList=res.data;
          }
        })
    },
    getExpenditure(){
      //基金支出
      let data={
        year:this.yearValue
      }
      getExpenditure(data).then(res => {
        if(res.code ==200){
            this.expendList = res.data;
            let str1 = (res.data.allTotal - res.data.insurance);
            let str2 = (res.data.allTotal -res.data.bigMoney);
            let str3 = (res.data.allTotal -res.data.individual);
            //百分比
            let p1 = (res.data.insurance/res.data.allTotal*100).toFixed(2);
            let p2 = (res.data.bigMoney/res.data.allTotal*100).toFixed(2);
            let p3 = (res.data.individual/res.data.allTotal*100).toFixed(2);
            var myChart = this.$echarts.init(document.getElementById('fund'));
              var insurance = this.$echarts.init(document.getElementById('insurance'));
              var person = this.$echarts.init(document.getElementById('person'));
              var option = {
                    color:['#ED9928','#ffffff'],
                    series: [
                      {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                          { value: res.data.insurance, name: p1+'%' },
                          { value: str1, name: (100-p1)+'%' },
                        ]
                      }
                    ]
                };
              var option1 = {
                    color:['#34CFEB','#ffffff'],
                    series: [
                      {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                          { value: res.data.bigMoney, name: p2+'%' },
                          { value: str2, name: (100-p2)+'%' },
                        ]
                      }
                    ]
                };
            var option2 = {
                  color:['#7663E9','#ffffff'],
                  series: [
                    {
                      name: 'Access From',
                      type: 'pie',
                      radius: '50%',
                      data: [
                        { value: res.data.individual, name: p3+'%' },
                        { value: str3, name: (100 - p3)+'%' },
                      ]
                    }
                  ]
              };
              myChart.setOption(option);
              insurance.setOption(option1);
              person.setOption(option2);
        }
      })

    },
    // getPayOfYear(){
    //   let data = {
    //     year:this.yearValue
    //   }
    //   getPayOfYear(data).then(res => {
    //      if(res.code ==200){
    //        let yeararr=[],cityarr=[],arr=[];
    //        res.data.map(item => {
    //          yeararr.push(item.yearValue);
    //          cityarr.push(item.residentTotal);
    //          arr.push(item.staffTotal)
    //        })
    //         var myChart = this.$echarts.init(document.getElementById('ratio'));
    //         var option = {
    //               title: {
    //                 text: '基金支出年度同比',
    //                 textStyle:{
    //                   color:'#333333',
    //                   fontSize:18,
    //                   fontFamily:'Microsoft YaHei'
    //                 }
    //               },
    //               color:['#FF8DAA','#FEA780'],
    //               legend: {
    //                 data: ['城镇职工', '城镇居民'],
    //                 icon:'circle',
    //                 right:40
    //               },
    //               calculable: true,
    //               xAxis: [
    //                 {
    //                   type: 'category',
    //                   data:yeararr
    //                 }
    //               ],
    //               yAxis: [
    //                 {
    //                   type: 'value',
    //                   splitLine: {show: false}
    //                 }
    //               ],
    //               series: [
    //                 {
    //                   name: '城镇职工',
    //                   type: 'bar',
    //                   data: arr
    //                 },
    //                 {
    //                   name: '城镇居民',
    //                   type: 'bar',
    //                   data:cityarr
    //                 }
    //               ]
    //             };
    //         myChart.setOption(option);
    //      }
    //   })

    // },
    getSumByMouth(){
      getSumByMouth(this.yearValue,this.mode).then(res => {
        if(res.code == 200){
            let data1=[],data2=[],data3=[],data4=[];
            var datas = res.data.map((item,index) => {
                data1.push(item.mouth);
                data2.push(item.residentSum);
                data3.push(item.payment)
                data4.push(item.staffSum)
            })
            var myChart = this.$echarts.init(document.getElementById('main1'));
             var option = {
                title : {
                    text: this.yearValue+'年基金支出额',
                    textStyle:{
                      color:'#333333',
                      fontSize:18,
                      fontFamily:'Microsoft YaHei'
                    }
                    // subtext: '纯属虚构'
                },
                color:["#3393E9","#9383F8","#FFE809"],
                legend: {
                    data:['大额资金','统筹资金','医疗救助'],
                    icon:'circle',
                    right:40
                },
                grid: {
                  show:false,
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data :data1
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {show: false}
                    }
                ],
                series : [
                    {
                        name:'大额资金',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:data2
                    },
                    {
                        name:'统筹资金',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:data3
                    },
                    {
                        name:'医疗救助',
                        type:'line',
                        smooth:true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data:data4
                    }
                ]
            };
            myChart.setOption(option);
        }
      })

    },
    getReimbursementAlert(){
      //报销预警区
      let data={
        year:this.yearValue
      }
      getReimbursementAlert(data).then(res=>{
        if(res.code ==200){
          this.reimList= res.data;
        }
      })
    },
    getDataMessage(){
      //月统计分析
      getDataMessage(this.value1).then(res => {
        if(res.code ==200){
          this.messList = res.data;
        }
      })
    }
  },
  mounted() {
    //机构数量
    this.getHospitalCount();
    //参保人数
    this.getPaymentPeople();
    //基金支出
    this.getExpenditure();
    //基金年度同比
    //this.getPayOfYear();
    //2022年基金支出额
    this.getSumByMouth();
    //报销预警区
    this.getReimbursementAlert();
    //月统计分析
    this.getDataMessage();
  }
};
</script>

<style scoped lang="scss">
p,h3,h1,h2{padding:0;margin:0}
.index-title{
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  text-align: center;
  padding-bottom: 20px;
}
.index-p{
  width:100%;
  height: 422px;
  overflow: auto;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 28px;
}
.table-th{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #333333;
  padding: 0 0 5px 0;
}
.table-td{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  padding: 5px 0;
}
.fund{
  background-color: #F1F3F4;
  border-radius: 10px;
  padding-left: 20px;
  margin-bottom: 12px;
  height: 100px;
  &.insurance{
    .money{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #34CFEB;
      padding-top: 5px;
      span{font-size: 12px;}
      .num{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
      }
    }
  }
  &.person{
    .money{
      color: #7663E9;
    }
  }
  &.sum{
    .money{
      color: #58A3F7;
    }
  }
  .word{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    line-height: 90px;
    text-align: center;
    span{
      color: #EA3232;
    }
  }
  .fund-t{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    padding-top:25px;
  }
  .money{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #F2982B;
    padding-top: 5px;
    span{font-size: 12px;}
    .num{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
  }
}
.pro-box{
  position: relative;
  margin-top: 10px;
  .pro-img{position:absolute;top: 10px; left:10px;}
}
.index-flex{display: flex;align-items: center;}
.index-items{width: 50%;}
.content{
    background-color: #F1F3F4;
    padding: 10px;
  }
.echarts-v3{
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    h2{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20px;
      .sum{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        text-align: right;
      }
    }
    .nav{
      .sub{
        width: 96%;
        height: 141px;
        background-color: #EFF1F3;
        text-align: center;
        padding-top: 20px;
        border-radius: 8px;
        &.active{
          background: url('../assets/images/nav-bg.png') no-repeat center;
          .name{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
            padding:5px 0;
          }
          .number{
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
          }
        }
        .name{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          padding:5px 0;
        }
        .number{
          font-size: 22px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
        }
      }
    }
    .line{
      margin-bottom: 10px;
      .index-flex{width: 100%;}
      .index-items{
        h3{
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
        }
        p{
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
        &:nth-child(2){
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          text-align: center;
        }
      }
    }
  }
</style>
